<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>实例</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>

    <div id="app-2">
        <p>{{ foo }}</p>
        <button v-on:click="foo = 'baz'">Change it</button>
    </div>

    <div id="app-3">
        {{ a }}
    </div>
    <script>
        //创建一个Vue实例
        var app = new Vue({
            el:'#app',
            //选项
            //数据与方法
            //会在晚些时候需要一个属性，但是一开始它为空或不存在，那么仅需要设置一些初始值,比如:
            data : {
                message : 'test',
                newTodoText : '',
                visitCount : 0,
                hideCompletedTodos : false,
                todos : [],
                error : null
            }
        })
        //使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。
        var obj = {
            foo:'bar'
        }
        Object.freeze(obj);
        var app2 = new Vue({
            el:'#app-2',
            data : obj
        })

        //除了数据属性, Vue实例还暴露了一些有用的实例属性与方法,它们都有前缀 $ , 以便与用户定义的属性区分开来
        var data = { a : 1}
        var vm = new Vue({
            el:'#app-3',
            data:data
        })

        vm.$data === data // => true
        vm.$el === document.getElementById('example') // => true

        // $watch 是一个实例方法
        vm.$watch('a', function (newValue, oldValue) {
          // 这个回调将在 `vm.a` 改变后调用
        })

        //实例生命周期钩子
        
        var app4 = new Vue({
            el:'#app-4',
            data : {
                a:1
            },
            created : function(){
                console.log('a is : ' + this.a)
            },
            mounted : function(){

            },
            updated : function(){

            },
            destroyed : function(){
                
            }
        })

    </script>
</body>
</html>